<template>
    <div class="wrap">
        <div class="login">
            <div class="beiji">
                <div class="h1">欢迎登录</div>
                <div class="items" style="padding:0 10px">
                    <div class="item">
                        <input class="ipt" v-model="username" type="text" style="width: 100%" placeholder="请输入用户名"/>
                    </div>
                    <div class="item">
                        <input class="ipt" v-model="password" type="password" style="width: 100%" placeholder="请输入密码"/>
                    </div>
                    <div class="item" style="display: flex;">
                        <input class="ipt" v-model="yanzhengma" type="text"  placeholder="请输入验证码" style="width: calc(100% - 123px );"/>
					<img
					                        class="login-code"
					                        :src="image_base"
					                        @click="yanzhengmafun"
					                      />
                    </div>
                    <div class="btns">
                        <div class="btn" @click="toLogin">登 录</div>
                    </div>
                </div>

            </div>


        </div>
    </div>
</template>

<script>
    export default {
        name: 'login',
        data() {
            return {
                username: '',
                password: '',
                yanzhengma:'',
                image_base:'',
                captchaKey:'',
            };
        },
        created(){
           this.yanzhengmafun()
           
        },
        methods: {
            yanzhengmafun(){
				let that = this;
                that.loginLoading=true
				that.$apiv.yanzhengma({
				}).then(function(res) {
					console.log('.then+获取验证码',res)
					that.image_base = res.data.image_base
					that.captchaKey = res.data.key
                    that.loginLoading=false
				}).catch(function(res) {
					console.log(res)
					that.loginLoading=false
					console.log('.catch+报警设备列表')
				})
			},


            toLogin() {
                if (!this.username || !this.password  || this.yanzhengma) {
                    this.$message.warning('请输入用户名和密码')
                    return false
                }
                console.log("登录", this.username, this.yanzhengma,this.password,)
                this.$apiv.doLogin({
                    username: this.username,
                    password:this.$md5(this.password),
                    captcha:this.yanzhengma,
                    captchaKey:this.captchaKey
                }).then(res => {
                    console.log("登录成功",res)
                    if (res.code == 2000 && res.msg =="请求成功") {
                        this.$auth.set("token",res.data.access)
                        this.$auth.set("name",res.data.name)
                        this.$auth.set("kaiguan",'guanbi')
                        let cc = this.$auth.get("token")
                        console.log('cc',cc)
                        //  let date = new Date().getTime() + (0.1 * 3600 * 1000)
                        //  let date = new Date().getTime() + (12 * 3600 * 1000)
                        //  this.$auth.set('tokenTime', date)
                        this.$router.push(
                            {path: '/'}
                        )
                    } else {
                        this.$message.error(res.data.msg)
                        return false
                        // setToken(res.data.token)
                        // setUserInfo({user_type: res.data.user_type})
                        
                    }
                })
            },
        }
    };
</script>
<style>
   .wrap{
	    width:100%;  
	    height:100%;  /**宽高100%是为了图片铺满屏幕 */
		background: url("../../../static/image/logbg.png") #071e4e no-repeat;
		position: fixed;
		background-size:100%; 
	    
	}
	/* .login{margin:0 auto;max-width:1300px;padding:239px 146px 0 845px;} */
	.login{padding-left: calc(50% + 70px ); padding-top:250px; font-size: 12px;}
	.beiji{background: url("../../../static/image/zuzu.png") no-repeat; width: 545px; height:476px; padding:20px 30px;}
	.h1{font-size:30px;color: #fff;text-align: center;padding:40px 0;}
	.login .item{margin:0px 0 20px;}
	.login .ipt{border-radius:6px;height:40px;line-height:40px;font-size: 14px;padding:0 10px;background-color: #fff; border: 0;}
	
	.login .btn{height:40px;line-height: 40px;box-shadow: 0 0 6px rgba(0,0,0,0.4);background-color: #fff;text-align: center;font-size: 14px;border-radius: 6px;font-weight: bold;}
.login-code{
		width: 120px;
	  height: 40px;
      margin-left: 3px;
      display: block;
      border-top-right-radius: 5px;
      border-bottom-right-radius:5px;
	  }
</style>
